<template>
	<view class="index-container">
		<view class="head">
			<view class="banner p-3">
				<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
					<swiper-item v-for="(item,index) in swiperList" :key="item">
						<view class="swiper-item" style="background-color: #fff;">
							<image v-if="item.storageKey" :src="showImage(item.storageKey)" mode="aspectFill"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<view class="notice mx-3 p-2 flex align-center">
				<view class="left  font-weight-bold">
					<span class="new">最新</span><span>通知</span>
				</view>
				<view class="right ml-3">
					<swiper :autoplay="true" circular :interval="3000" :duration="1000" class="swiper">
						<swiper-item v-for="item in noticeList" :key="item">
							<view class="swiper-item">{{item.messageContent}}</view>
						</swiper-item>
					</swiper>
				</view>

			</view>
		</view>

		<view class="fun   m-3">
			<view class="item" v-for="(item,index) in funList" @click="navTo(item.url)"
				:style="{'backgroundColor':item.backColor}" :class="{'none':!item.auth}">
				<view class="content" :style="{'backgroundColor':item.backColor}">
					<view class="" style="width: 80rpx;height: 80rpx;">
						<image :src="item.img" mode="aspectFill" class="img"></image>
					</view>
					<view class="text font-weight-bold mt-1">{{item.name}}</view>
				</view>

			</view>
		</view>
		<view class="line"></view>
		<view class="activity flex justify-between  mx-3 my-3 align-center">
			<view class="left_text text-default">志愿活动</view>
			<view class="right_text text-shallow " @click="toMore"><span>更多</span><uni-icons class="icon" type="right"
					size="14" color="#999"></uni-icons></view>
		</view>

		<view class="tabs-swiper pb-4 ">
			<TabsSwiperVue :tabIndex="tabIndex" :swiperBoxHeight="swiperBoxHeight" :paddingX="'15px'"
				:swiperBoxBG="'#f5f5f5'" @clickTab="changeTab" @clickSwiper="chagneSwiper">
				<template #switerItemContent>
					<scroll-view scroll-y="false" @scrolltolower="loadMoreActivity">
						<view v-if="activityList?.length>0" class="content pt-3"
							style="display: grid; grid-template-columns: 1fr 1fr;gap: 20rpx;padding-bottom: 40rpx;">
							<view class="content1" v-for="item in activityShowList" :key="item"
								@click="toAcivityDetail(item)">
								<view class="top">
									<image v-if="item?.responsibleimg"
										:src="showImage(item.responsibleimg[0].storageKey)" mode="aspectFill"
										class="image bg-default"></image>
									<image class="image bg-default" v-else src="" mode="aspectFill"></image>

								</view>
								<view class="bottom px-1 pb-2">
									<view class="personNUm py-1 px-2 flex justify-center content-center">
										<view style="height: 23rpx; width: 32rpx;">
											<image src="../../static/icon/person.png" mode="aspectFill" class="img">
											</image>
										</view>
										<span
											style="margin-left: 3rpx;">{{item.participateCount}}/{{item.numberRecruits}}</span>
									</view>
									<view class="title font-weight-bolder text-default py-1 pl-1">{{item.activityName}}
									</view>
									<view class="bottom mt-1">
										<view class="organization text-shallow font-sm pl-1">
											{{item.teamjsIdOrganizationName}}
										</view>
										<view class="address text-shallow font-sm py pl-1">
											{{item.serviceAddressAddress||'---'}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="flex justify-center align-center"
							style="width: 100%; display: flex; justify-content: center; box-sizing: border-box;">
							<l-empty description="空空如也" />
						</view>
					</scroll-view>
				</template>
			</TabsSwiperVue>
		</view>

		<view class="tabBar-box  fixed-bottom">
			<TabBar></TabBar>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted
	} from 'vue'
	import {
		showImage
	} from '../../api/common.js'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getColorsList
	} from '../../common/common.js'

	import CryptoJS from 'crypto-js'


	import request from '../../api/index.js';
	import TabsSwiperVue from '../../component/commonLayout/TabsSwiper.vue';
	import TabBar from '../../component/TabBar/TabBar.vue';

	import {
		useUserStore
	} from '../../stores/user.js'
	const codeStore = useUserStore()






	const imgList = ref([{
			img: '',

		},
		{
			img: '',

		},
		{
			img: '',

		}
	])

	const tabIndex = ref(0)
	const showcode = ref('')


	const activityList = ref([])
	const swiperList = ref([])
	const swiperBoxHeight = ref('')
	const noticeList = ref([])

	const isAdministrators = ref(null)
	const funList = ref([{
			name: '志愿活动',
			url: '/pages/activity/activity',
			img: '../../static/icon/activity.png',
			backColor: "#f2f4ff",
			auth: true
		},
		{
			name: '找组织',
			url: '/pages/organization/organization',
			img: '../../static/icon/organization.png',
			backColor: "#fff7f7",
			auth: true
		},
		{
			name: '志愿者总队',
			url: '/pages/volunteerCorps/volunteerCorps',
			img: '../../static/icon/team.png',
			backColor: "#faf7ff",
			auth: true
		},
		{
			name: '积分榜单',
			url: '/pages/pointsRanking/pointsRanking',
			img: '../../static/icon/rank.png',
			backColor: "#fffbf5",
			auth: true
		},
		{
			name: '进行评价',
			url: '/pages/evaluate/evaluate',
			img: '../../static/icon/evaulate.png',
			backColor: "#f2f4ff",
			auth: true
		},
		{
			name: '请假申请',
			url: '/pages/leaveApplication/leaveApplication',
			img: '../../static/icon/leave.png',
			backColor: "#f7fff9",
			auth: true
		},
		{
			name: '联络人签退',
			url: '/pages/signOffList/signOffList',
			img: '../../static/icon/signoff.png',
			backColor: "#fffbf5",
			auth: true
		},
	])

	const changeTab = (item) => {
		console.log('item', item);
		getActivity(item.name)
		tabIndex.value = item.index
	}
	const activityShowList = ref([])
	const currentpage = ref(500)

	//触底加载
	const loadMoreActivity = (e) => {
		let nextpage = currentpage.value + 10
		if (nextpage < activityList.value.length) {
			activityShowList.value = [...activityShowList.value, ...activityList.value.slice(currentpage.value,
				nextpage)]
			currentpage.value = nextpage
		} else {
			console.log('没有更多了', nextpage, activityList.value.length)
		}

		console.log('触底了', e)
	}

	const chagneSwiper = (e) => {

		console.log("e------", e);

		getActivity(e.date)

		tabIndex.value = e.detail.current
	}

	const navTo = (url) => {
		uni.navigateTo({
			url: url
		})
	}



	const getSwiperData = () => {
		request({
			url: '/api/contenthub/information-databas/selectInformationByLocation',
			method: 'GET',
			data: {
				displayLocation: 1
			}

		}, e => {
			if (e.success) {
				console.log('e-------getSwiperData------', e.data)
				const columnImage = JSON.parse(e.data[0].columnimg)
				console.log('columnImage-------------', columnImage)
				swiperList.value = columnImage


			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'error'
				})
			}
		})
	}





	const getNnoticeData = () => {
		request({
			url: '/api/volunteer/notify/SelectNotityByDisplayDuration',
			method: 'GET',

		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				noticeList.value = e.data
			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'error'
				})
			}
		})
	}

	const getActivity = (date = "") => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		request({
			url: '/api/volunteer/activity/activity-listPage',
			method: 'GET',
			data: {
				formName: 'Activity',
				beginTimeStart: date,
				beginTimeEnd: date,
				statusInList: '1,2'
			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				activityList.value = e.data.records
				activityShowList.value = e.data.records.slice(0, currentpage.value)
				const length = activityList.value?.length
				if (length > 2) {
					swiperBoxHeight.value = (Math.ceil(length / 2)) * 480 + 'rpx';
				} else {
					swiperBoxHeight.value = '800rpx'
				}

				console.log("swiperBoxHeight.value-----------", swiperBoxHeight.value);


			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'error'
				})
			}
			uni.hideLoading()
		})
	}
	const toMore = () => {
		uni.navigateTo({
			url: `/pages/activity/activity`
		})
	}

	const toAcivityDetail = (item) => {
		let itemData = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/activityDetail/activityDetail?data=${itemData}`
		})
	}





	const isHaveAuorth = () => {
		let userDataInfo = {}
		uni.getStorage({
			key: 'userData',
			success(e) {
				console.log("e==========", e);
				userDataInfo = e.data
			},

		});
		console.log("userDataInfo", userDataInfo);
		const result = userDataInfo?.roles?.some(item => {
			console.log("item------------", item);
			if ([2, 3, 4].includes(item)) {
				return true;
			}
			return false;
		});

		console.log(result);
		console.log("funList.value[6]------------", funList.value);
		funList.value[6].auth = result
	}




	

	onShow(() => {
		

	})
	onMounted(() => {
		

		// uni.setStorage({
		// 	key: 'token',
		// 	data: {
		// 		token: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTcwNzAyNzk4OSIsImV4cCI6MTcyODc5OTY4MSwiaWF0IjoxNzI4NzEzMjgxLCJkbiI6IuayiOWPi-iwhSIsInR5cGUiOiJBRE1JTiIsInVpZCI6MzU5ODd9.e9D0FleWu311wL2Qy0rvXVZQj8UHgmLbYQkYA_R1OIpMpP53F0C3sKamBGZs2jv6QrCrMwzGSx_OeAalVBL2Wg'
		// 	},

		// })


		


		let token = {}
		uni.getStorage({
			key: 'token',
			success(e) {
				console.log("e==========", e);
				token = e.data
			},

		});



		if (Object.keys(token).length != 0) {
			isHaveAuorth()
			getSwiperData()
			getNnoticeData()
			getActivity()


		}


	



	})
</script>

<style lang="scss" scoped>
	.index-container {
		width: 100%;
		height: 100vh;

		.head {
			padding-bottom: 32rpx;
			// background-color: #505fff;
			background-color: #3975C6;
			border-radius: 0 0 30rpx 30rpx;

			.banner {
				.swiper {
					border-radius: 16rpx;
					overflow: hidden;
					height: 350rpx;

					.swiper-item {
						border-radius: 16rpx;
						height: 100%;
						width: 100%;

						image {
							border-radius: 16rpx;
							height: 100%;
							width: 100%;
						}

						// overflow: hidden;
					}
				}
			}

			.notice {
				background-color: #fff;
				border-radius: 20rpx;
				font-family: Alimama ShuHeiTi;
				overflow: hidden;



				.left {
					padding-right: 20rpx;
					border-right: 1rpx solid #ccc;
					font-size: 32rpx;

					.new {
						color: #505FFF;


					}
				}

				.right {
					width: 70%;
					font-size: 28rpx;

					.swiper {
						width: 100%;
						height: 40rpx;
					}


				}


			}
		}

		.fun {

			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;

			.none {
				display: none;
			}

			.item {
				padding-left: 21rpx;
				padding-top: 21rpx;
				width: 158rpx;
				height: 158rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				position: relative;


				.icon {

					height: 62rpx;
					width: 62rpx;
					border-radius: 20rpx;
					position: relative;
					z-index: 22;
				}

				.text {
					color: #333;
					font-size: 24rpx;
					// margin-top: rpx;
				}

				.circle {
					position: absolute;
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					top: 60rpx;
					left: 60rpx;
				}
			}
		}

		.line {
			height: 20rpx;
			background-color: #f5f5f5;
		}

		.activity {
			.left_text {
				font-size: 36rpx;
				font-weight: bold;
			}

			.right_text {
				line-height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #ccc;

				.icon {
					margin-top: 1rpx;
				}
			}
		}

		.tabs-swiper {
			background-color: #f5f5f5;
			margin-bottom: 350rpx;

			.content1 {
				// margin-top: 400rpx;
				box-sizing: border-box;
				width: 100%;
				// height: 400rpx;
				background-color: #f7f7f7;
				position: relative;

				.top {
					width: 100%;
					height: 220rpx;

					.image {
						width: 100%;
						height: 100%;
						border-top-left-radius: 12rpx;
						border-top-right-radius: 12rpx;
						background-color: #ccc;
					}
				}


				.bottom {
					background-color: #fff;
					border-bottom-left-radius: 12rpx;
					border-bottom-right-radius: 12rpx;

					.address {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						/* 将对象作为弹性伸缩盒子模型显示 */
						-webkit-line-clamp: 1;
						/* 行数，值可以改，表示展示X行后多余的缩略展示 */
						-webkit-box-orient: vertical;
						/* 设置或检索伸缩盒对象的子元素的排列方式 */
						word-break: break-all;
					}
				}

				.personNUm {
					position: absolute;
					left: 10rpx;
					top: 10rpx;
					font-size: 24rpx;
					background-color: #484b4c;
					border-radius: 30rpx;
					color: #fff;
				}



				.NumberPeo {
					position: absolute;
					top: 0;
					font-size: 24rpx;
					left: 5rpx;
				}



			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>